<template>
	<view class="index">
		<scroll-view class="scroll-view" scroll-y="true" refresher-enabled="true" 
		:refresher-triggered="triggered" refresher-background="#fff" 
		@refresherrefresh="pulldown" @scrolltolower="scrolltolower" >
			
			<navNav :navobj="navobj"></navNav>
			<Swiper :bannarList="bannarList"></Swiper>
			<Content ref="content" @triggeredfun="triggeredfun"></Content>
		
			<view style="height: 100rpx;"></view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {reactive,ref,getCurrentInstance} from 'vue'
	import {onLoad} from "@dcloudio/uni-app"
	const {proxy} = getCurrentInstance()
	import Swiper from './swiper.vue'
	import Content from './content.vue'

	const navobj = reactive({
		title:'接单大厅',
		image:false
	})
	const triggered = ref(false)
	
	onLoad(()=>{
		
	})
	
	const content = ref(null)
	// 下拉刷新
	const pulldown=()=>{
		triggered.value=true
		content.value.pulldown()
	}
	//上拉加载
	const scrolltolower=()=>{
		content.value.scrolltolower()
	}
	const triggeredfun=()=>{
		triggered.value = false
	}

</script>

<style lang="scss" scoped>
	page{
		overflow: hidden;
	}
	.scroll-view{
		height: 100vh;width: 750rpx;margin: 0 auto;
		
		.xtorder{
			width: 670rpx;margin: 0 auto;;margin-top: 60rpx;
			.zero{
				font-size: 20rpx; height: 100rpx;text-align: center;line-height: 90rpx;color: #ccc;
			}
			.orderchoose{
				display: flex;align-items: center;
			}
		
			.splist{
				margin: 0 auto;
				.sp{
					background-color: #fff;width: 670rpx;height: 242rpx;
					border-bottom: 1rpx solid #eee;
					margin-top: 40rpx;
					.spon{
						display: flex;
						image{
							width: 140rpx;height: 140rpx;border-radius: 10rpx;
						}
						.sponirght{
							display: flex;flex-direction: column;justify-content: space-between; width: 510rpx;height: 140rpx;margin-left: 20rpx;;
							.titles{
								display: flex;align-items: center;justify-content: space-between;
								.title{
									width: 300rpx;font-weight: 700;font-size: 28rpx;color: #3D3D3D;
									overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
								}
								.ykj{
									display: flex;align-items:center;font-size: 28rpx;font-weight: 700rpx;color:#FA5151 ;
								}
							}
							.des{
								width: 510rpx;font-weight: 400;font-size: 24rpx;color: #3D3D3D;white-space: nowrap;
								overflow: hidden;text-overflow: ellipsis;
							}
							.addresss{
									display: flex;align-items: center; font-size: 20rpx;color: rgba(0,0,0,0.3);

									.address{
										width: 490rpx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
									}
									image{
										width: 30rpx;
										height: 30rpx;
										margin-right: 12rpx;
									}
							}
							.times{
									display: flex;align-items: center;font-size: 22rpx;color: rgba(0,0,0,0.3);
									
									.time{
										width: 490rpx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
									}
									image{
										width: 30rpx;
										height: 30rpx;
										margin-right: 12rpx;
									}
							}
						}
					}
					.qd{
						display: flex;align-items: center;justify-content: space-between;margin-top: 30rpx;
						.qqd{
							width: 180rpx;
							height: 48rpx;
							background: #3662EC;
							border-radius: 10rpx 10rpx 10rpx 10rpx;line-height: 48rpx;
							text-align: center;font-weight: 700;font-size: 20rpx;color: #FFFFFF;
						}
					}
				}
			}
		}
	}
	.activeorderstyle{
		font-weight: 700;
		font-size: 32rpx;
		color: #3D3D3D;
	}
	.orderstyle{
		font-weight: 700;
		font-size: 32rpx;
		color: rgba(0,0,0,0.3);
		
	}

</style>
